<template>
	<view class="container">
		<uni-swiper-dot :info="[goodsInfo.medicinesImg]" :current="current" mode="round" :dots-styles="dotsStyles">
			<swiper class="swiper">
				<swiper-item>
					<image :src="goodsInfo.medicinesImg" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>

		<view class="goods-card">
			<view class="price-box">
				<text
					class="price">¥{{goodsInfo.prescriptionPrice ? goodsInfo.prescriptionPrice.toFixed(1) : '0.0'}}</text>
				<text class="original-price">¥{{(goodsInfo.prescriptionPrice * 1.2).toFixed(1)}}</text>
			</view>
			<view class="title-box">
				<text :class="['drug-type', goodsInfo.isOtc === '0' ? 'otc-type' : 'prescription-type']"
					v-if="goodsInfo.isOtc === '0'">OTC</text>
				<text :class="['drug-type', goodsInfo.isOtc !== '1' ? 'otc-type' : 'prescription-type']"
					v-else>处方药</text>
				<text class="title">{{goodsInfo.medicinesName}}</text>
			</view>
			<view class="info-item spec">
				<text class="info-label">规格：</text>
				<text
					class="info-value">{{goodsInfo.unit== "袋"?"10"+goodsInfo.unit+"/盒":"10"+goodsInfo.unit+"/条"}}</text>
			</view>
			<view class="info-item effect">
				<text class="info-label">功效：</text>
				<text class="info-value">{{goodsInfo.effect}}</text>
			</view>
			<view class="info-item usage">
				<text class="info-label">用法用量：</text>
				<text class="info-value">{{goodsInfo.dosage}}</text>
			</view>
			<view class="info-item manufacturer">
				<text class="info-label">生产商：</text>
				<text class="info-value">{{templateByProducterId(goodsInfo.producterId)}}</text>
			</view>
		</view>

		<view class="footer">
			<view class="tags">
				<view class="tag"><uni-icons type="checkmarkempty" size="16" color="#0EB6FD"></uni-icons>正品保证</view>
				<view class="tag"><uni-icons type="locked" size="16" color="#0EB6FD"></uni-icons>隐私发货</view>
				<view class="tag"><uni-icons type="closeempty" size="16" color="#0EB6FD"></uni-icons>不支持7天无理由退换</view>
			</view>
			<view class="button-group">
				<button class="cart-btn" @click="addToCart">加入购物车</button>
				<button class="buy-btn" @click="buyNow">立即购买</button>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSwiperDot from '@/uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue'
	import {
		getMedicinesById
	} from '@/api/medicines/index.js'
	import {
		listProducter
	} from '@/api/producter/index.js'
	import {
		postCreatedCashPayment
	} from '@/api/orderCharge/index.js'
	export default {
		components: {
			'uni-swiper-dot': uniSwiperDot
		},
		data() {
			return {
				swiperList: [],
				current: 0,
				producterList: [],
				producterMap: {},
				dotsStyles: {
					backgroundColor: 'rgba(0, 0, 0, .3)',
					border: '1px rgba(0, 0, 0, .3) solid',
					color: '#fff',
					selectedBackgroundColor: '#007aff',
					selectedBorder: '1px #007aff solid'
				},
				goodsInfo: {},
				cartForm: {},
				orderChargeFormDTO: {
					orderCharge: {
						orderAmount: 0,
						patientName: '',
					},
					orderChargeItems: [{
						itemName: '',
						itemPrice: 0,
						itemNum: 0,
						itemType: 0,
						itemAmount: 0
					}],
				},
			}
		},
		onLoad(options) {
			this.getProducter()
			this.getGoodsDetail(options.medicinesId)
		},
		methods: {
			changeSwiper(e) {
				this.current = e.detail.current
			},
			addToCart() {
				let cartFormDTO=[];
				if (uni.getStorageSync('cart')) {
					cartFormDTO = uni.getStorageSync('cart')
				}
				//收集数据
				this.cartForm= {
					medicinesId: this.goodsInfo.medicinesId,
					medicinesImg: this.goodsInfo.medicinesImg,
					medicinesName: this.goodsInfo.medicinesName,
					prescriptionPrice: this.goodsInfo.prescriptionPrice,
					unit: this.goodsInfo.unit,
					isOtc: this.goodsInfo.isOtc,
					itemNum: 1,
					checked: true
				}
				cartFormDTO.push(this.cartForm)
				uni.setStorageSync('cart', cartFormDTO)
				uni.showToast({
					title: '已加入购物车',
					icon: 'success'
				})
			},
			buyNow() {
				uni.showModal({
					title: '确认购买',
					content: '是否确认购买该商品？',
					success: (res) => {
						if (res.confirm) {
							//收集数据
							this.orderChargeFormDTO.orderCharge.orderAmount = this.goodsInfo.prescriptionPrice
							this.orderChargeFormDTO.orderCharge.patientName = uni.getStorageSync('patient').name
							this.orderChargeFormDTO.orderChargeItems[0].itemName = this.goodsInfo.medicinesName
							this.orderChargeFormDTO.orderChargeItems[0].itemPrice = this.goodsInfo
								.prescriptionPrice
							this.orderChargeFormDTO.orderChargeItems[0].itemNum = 1
							this.orderChargeFormDTO.orderChargeItems[0].itemType = 0
							this.orderChargeFormDTO.orderChargeItems[0].itemAmount = this.goodsInfo
								.prescriptionPrice*this.orderChargeFormDTO.orderChargeItems[0].itemNum
							//创建现金收费
							postCreatedCashPayment(this.orderChargeFormDTO).then(res => {
								if (res.data != null) {
									uni.showToast({
										title: '购买成功',
										icon: 'success'
									})
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/mall/index'
										})
									}, 1000)
								}
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '取消购买',
								icon: 'none'
							})
						}
					}
				})
			},
			getGoodsDetail(medicinesId) {
				getMedicinesById(medicinesId).then(res => {
					this.goodsInfo = res.data
				})
			},
			//获取所有的生产商信息
			getProducter() {
				listProducter().then(res => {
					this.producterList = res.data
					// 创建生产商ID到名称的映射
					this.producterMap = {}
					res.data.forEach(item => {
						this.producterMap[item.producterId] = item.producterName
					})
				})
			},
			//翻译生产商ID(优化版)
			templateByProducterId(id) {
				if (!this.producterMap) return '';
				return this.producterMap[id] || '';
			},
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20rpx;
	}

	.swiper {
		height: 400rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.goods-card {
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.price-box {
		display: flex;
		align-items: baseline;
		margin-bottom: 30rpx;
	}

	.price {
		color: #f40;
		font-size: 48rpx;
		font-weight: bold;
	}

	.original-price {
		text-decoration: line-through;
		color: #999;
		font-size: 28rpx;
		margin-left: 20rpx;
	}

	.title-box {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		margin-left: 10rpx;
	}

	.drug-type {
		display: inline-block;
		padding: 0 10rpx;
		color: white;
		border-radius: 8rpx;
		font-size: 24rpx;
	}

	.otc-type {
		background: #0EB6FD;
	}

	.prescription-type {
		background: #F66586;
	}

	.info-item {
		display: flex;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px dashed #eee;
	}

	.info-label {
		color: #999;
		font-size: 28rpx;
		width: 140rpx;
	}

	.info-value {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		background: #fff;
		border-top: 1px solid #eee;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

		.tags {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.tag {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #666;

				.uni-icons {
					margin-right: 5rpx;
				}
			}
		}

		.button-group {
			display: flex;
			justify-content: space-between;
			width: 100%;
		}

		button {
			height: 80rpx;
			line-height: 80rpx;
			flex: 0 0 48%;
			margin: 0;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: bold;

			&.cart-btn {
				background: linear-gradient(to right, #4CB8FF, #0EB6FD);
				color: #fff;
			}

			&.buy-btn {
				background: linear-gradient(to right, #FF9500, #FF5000);
				color: #fff;
			}
		}
	}
</style>